<template>
  <div>
    <!-- 头部 -->
    <div class="vid_header">
      <!-- 顶部导航栏 -->
      <mt-navbar class="vid_nav" v-model="selected_video">
        <img class="vid_zb" src="../assets/tupianzhiboicon.png">
        <div class="vid_kong"></div>
        <mt-tab-item id="1"><span>关注</span></mt-tab-item>
        <mt-tab-item id="2"><span>赞</span></mt-tab-item>
        <mt-tab-item id="3"><span>推荐</span></mt-tab-item>
        <div class="vid_kong"></div>
        <img class="vid_jia" src="../assets/tianjia.png">
      </mt-navbar>
      <!-- 搜索 -->
      <div><input placeholder="搜你想看的视频"/></div>
    </div>
    <mt-tab-container class="vid_con" v-model="selected_video">
      <mt-tab-container-item id="1">
        <div class="vid_content" v-for="i in 5" :key="i">
          <!-- 微博题头 -->
          <div class="gz_title">
            <!-- 发博人头像 -->
            <div><img class="gx_avatar" src="../assets/avatar/0.jpg"></div>
            <div class="gx_msg">
              <!-- 发博人账号 -->
              <div class="gx_uname">头条新闻</div>
              <!-- 发博信息 -->
              <div class="gx_time"><span>24小时播报热点资讯</span></div>
            </div>
          </div>
          <!-- 微博视频或图片 -->
          <div class="gx_pic">
            <img src="../assets/logo.png">
          </div>
          <hr>
          <!-- 操作：转发，评论，点赞 -->
          <div class="gx_caozuo">
            <!-- 转发 -->
            <div class="gx_zhuan">
              <img class="gx_forward" src="../assets/forward.png">26
            </div>
            <!-- 评论 -->
            <div class="gx_ping">
              <img class="gx_community" src="../assets/community.png">26
            </div>
            <!-- 点赞 -->
            <div class="gx_zan">
              <img class="gx_appreciate" src="../assets/appreciate.png">26
            </div>
          </div>
          <div class="gx_wrap"></div>
        </div>
        <div class="gx_wraps"></div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div class="vid_content" v-for="i in 5" :key="i">
          <!-- 微博题头 -->
          <div class="gz_title">
            <!-- 发博人头像 -->
            <div><img class="gx_avatar" src="../assets/avatar/0.jpg"></div>
            <div class="gx_msg">
              <!-- 发博人账号 -->
              <div class="gx_uname">头条新闻</div>
              <!-- 发博信息 -->
              <div class="gx_time"><span>超话主持人(电影超话)</span></div>
            </div>
          </div>
          <!-- 微博视频或图片 -->
          <div class="gx_pic">
            <img src="../assets/logo.png">
          </div>
          <hr>
          <!-- 操作：转发，评论，点赞 -->
          <div class="gx_caozuo">
            <!-- 转发 -->
            <div class="gx_zhuan">
              <img class="gx_forward" src="../assets/forward.png">26
            </div>
            <!-- 评论 -->
            <div class="gx_ping">
              <img class="gx_community" src="../assets/community.png">26
            </div>
            <!-- 点赞 -->
            <div class="gx_zan">
              <img class="gx_appreciate" src="../assets/appreciate.png">26
            </div>
          </div>
          <div class="gx_wrap"></div>
        </div>
        <div class="gx_wraps"></div>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <div class="vid_content" v-for="i in 5" :key="i">
          <!-- 微博题头 -->
          <div class="gz_title">
            <!-- 发博人头像 -->
            <div><img class="gx_avatar" src="../assets/avatar/0.jpg"></div>
            <div class="gx_msg">
              <!-- 发博人账号 -->
              <div class="gx_uname">头条新闻</div>
              <!-- 发博信息 -->
              <div class="gx_time"><span>电影博主 微博原创视频博主</span></div>
            </div>
          </div>
          <!-- 微博视频或图片 -->
          <div class="gx_pic">
            <img src="../assets/logo.png">
          </div>
          <hr>
          <!-- 操作：转发，评论，点赞 -->
          <div class="gx_caozuo">
            <!-- 转发 -->
            <div class="gx_zhuan">
              <img class="gx_forward" src="../assets/forward.png">26
            </div>
            <!-- 评论 -->
            <div class="gx_ping">
              <img class="gx_community" src="../assets/community.png">26
            </div>
            <!-- 点赞 -->
            <div class="gx_zan">
              <img class="gx_appreciate" src="../assets/appreciate.png">26
            </div>
          </div>
          <div class="gx_wrap"></div>
        </div>
        <div class="gx_wraps"></div>
      </mt-tab-container-item>
    </mt-tab-container>
    
    
    <!-- 底部导航栏 -->
    <mt-tabbar v-model="selected_bottom" fixed>
      <mt-tab-item id="home">
        <img v-if="selected_bottom=='home'" src="../assets/homefill.png" slot="icon">
        <img v-else src="../assets/home.png" slot="icon">
        首页
      </mt-tab-item>
      <mt-tab-item id="video">
        <img v-if="selected_bottom=='video'" src="../assets/recordfill.png" slot="icon">
        <img v-else src="../assets/record.png" slot="icon">
        视频号
      </mt-tab-item>
      <mt-tab-item id="found">
        <img v-if="selected_bottom=='found'" src="../assets/samefill.png" slot="icon">
        <img v-else src="../assets/same.png" slot="icon">
        发现
      </mt-tab-item>
      <mt-tab-item id="community">
        <img v-if="selected_bottom=='community'" src="../assets/communityfill.png" slot="icon">
        <img v-else src="../assets/community.png" slot="icon">
        消息
      </mt-tab-item>
      <mt-tab-item id="people">
        <img v-if="selected_bottom=='people'" src="../assets/peoplefill.png" slot="icon">
        <img v-else src="../assets/people.png" slot="icon">
        我
      </mt-tab-item>
    </mt-tabbar> 
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected_video:"1",
      selected_bottom:'video'
    }
  },
  watch: {
    // 页面跳转
    selected_bottom(newval){
      if(newval=="home"){
        this.$router.push('/');
      }else if(newval=="video"){
        this.$router.push('/video');
      }else if(newval=="found"){
        this.$router.push('/found');
      }else if(newval=="community"){
        this.$router.push('/community');
      }else if(newval=="people"){
        this.$router.push('/people');
      }
    }
  }
}
</script>
<style scoped>
/* 题头 */
.vid_header{
  height: 100px;
  width: 100%;
  background-color: white;
  border-bottom: 2px solid #ECECEC;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
.vid_header img{
  margin: 0 10px;
  margin-top: 10px;
  height: 30px;
}
/* 顶部导航文字 */
.mint-navbar .mint-tab-item.is-selected{
  color: rgb(255, 150, 68);
  border-bottom: 3px solid rgb(255, 150, 68);
}
/* 顶部空白 */
.vid_kong{
  width: 30px;
}
/* 选项卡文字 */
.vid_header span{
  font-size: 17px;
}
.vid_nav{
  line-height: 55px;
  color: #999;
}
/* 搜索 */
.vid_header>div{
  text-align: center;
}
.vid_header input{
  height: 30px;
  width: 325px;
  margin-top: 10px;
  border-radius: 50px;
  text-align: center;
  border: 1px solid white;
  background-color: #E9E9E9;
}
/* 选项卡内容 */
.vid_con{
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
}

/* 关注选项卡内容 */
/* 微博题头 */
.gz_title{
  display: flex;
  height: 65px;
  position: relative;
}
/* 发博人头像 */
.gx_avatar{
  width: 60px;
  border-radius: 50%;
  margin-left: 7px;
  margin-top: 4px;
}
/* 发博人信息 */
.gx_msg{
  margin-left: 10px;
}
/* 发博人账号 */
.gx_uname{
  height: 25px;
  font-size: 18px;
  font-family: 黑体;
  margin-top: 10px;
}
/* 发博时间 */
.gx_time{
  margin-top: 7px;
}
.gx_time span{
  color: #999;
}
/* 下拉箭头 */
.gx_xiala{
  position: absolute;
  right: 5px;
  height: 65px;
  top: 10px;
}
.gx_unfold{
  height: 20px;
}
/* 微博内容 */
.gx_content{
  margin-top: 10px;
  margin-left: 7px;
  height: 175px;
  display: -webkit-box;    
  -webkit-box-orient: vertical;    
  -webkit-line-clamp: 7;    
  overflow: hidden; 
  line-height: 25px;
}
/* 微博图片或视频 */
.gx_pic{
  width: 100%;
}
/* 操作：转发，评论，点赞 */
.gx_caozuo{
  display: flex;
}
.gx_zhuan,
.gx_ping,
.gx_zan{
  display: flex;
  width: 33.3%;
  justify-content: center;
}
.gx_forward,
.gx_community,
.gx_appreciate{
  height: 20px;
}
/* 换行 */
.gx_wrap{
  height: 10px;
  width: 100%;
  margin: 10px 0 10px 0;
  background-color: rgb(237, 237, 237);
}
.gx_wraps{
  height: 50px;
  width: 100%;
}
/* 底部选项卡 */
.mint-tabbar>.mint-tab-item.is-selected{
  color: #2C3E50;
}
</style>